<template>
	<view class="onebox">
		<view class="headBg">
			<view class="head-content">
				<view class="head-content-left" style="margin-left: 20rpx;">
					搜索
				</view>
				<view class="head-content-center">
					{{schoolName}}园圈
				</view>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'cur':''" v-for="(item,index) in navList2" :key="index"
				@tap="tabSelect" :data-id="index">
				<view class="cu-item2">
					<view class="title1" :class="{'active':index==TabCur}">
						{{item.name}}
						<image class="title2" src="../../static/new/29.png" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<template v-if="TabCur==0">
			<view class="row-me row-center margin-left30 margin-right30 broadcast">
				<image class="img7" src="../../static/new/43.png" mode=""></image>
				<swiper circular="true" display-multiple-items="2" vertical="true" autoplay="true" interval="3000"
					duration="1000" class="margin-right30 swiperBox">
					<swiper-item v-for="(item,index) in noticeList" :key="index" class="row-me row-center swiperItem">

						<view class="margin-left10 txt1"> <text v-if="index<=9"
								style="color: #26B8A5;">0{{index+1}}</text><text v-if="index>9"
								style="color: #26B8A5;">{{index+1}}</text>{{item}}
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="box25" v-for="(item,index) in TzList" :key="index">
				<view class="box5">
					<view class="box5 box24" @click="tzHome(item.user_id)">
						<view>
							<image class="img4"
								style="width: 90rpx; height: 90rpx; margin-right: 20rpx; border-radius: 50%;"
								:src="item.avatar" mode="">
							</image>
						</view>
						<view class="text">
							<view class="" style="font-size: 28rpx; font-weight: 600;">
								{{item.nickname}}
							</view>
							<view class="" style="font-size: 26rpx; color: #A3A2A2; margin-top: 16rpx;">
								发布于 {{ item.createtime | timeAgo }}
							</view>
						</view>
					</view>
					<view class="box7">
						<view class="btn2">
							<image class="img3" src="../../static/syqt/gz.png" mode=""></image>
							<view class="text" style="font-size: 26rpx; color: #26B8A5;">
								关注
							</view>
						</view>
					</view>
				</view>
				<view @click="tzDetails(item.id)" class="box5" style="margin: 20rpx 0;">
					<view class="text box5" style="font-size: 28rpx;">
						<view v-if="item.nav_name" class="btn3">
							<image src="../../static/new/8.png" style="width: 20rpx; height: 20rpx; margin-right: 6rpx;"
								mode=""></image>
							{{item.nav_name}}
						</view>
						{{item.content}}
					</view>
				</view>
				<view v-if="item.images.length>1" class="box88888">
					<view v-for="(items,index) in item.images" :key="index" style="margin-top: 30rpx;">
						<image class="img13" style="margin-right: 28rpx; " :src="items" mode="">
						</image>
					</view>
				</view>

				<view class="box5" style="margin: 20rpx 0rpx;">
					<view class="box5 box24">
						<!-- <image class="img14" src="../../static/syqt/fx.png" mode=""></image>
						<view class="text" style="font-size: 22rpx; color: #929090;">
							赞赏
						</view>

						<image class="img15" v-if="item.is_top==1" src="../../static/syqt/rm.png" mode=""></image>
						<view class="text" v-if="item.is_top==1" style="font-size: 25rpx; color:  #ff7500;">
							置顶
						</view> -->
					</view>
					<view class="box5">
						<view class="box5">
							<image class="img14" src="../../static/syqt/pl.png" mode=""></image>
							<view class="text" style="font-size: 22	rpx; color: #929090;">
								{{item.comment_num}}
							</view>
						</view>
						<view class="box5" style="margin-left: 30rpx;">
							<!-- 未点赞 -->
							<image v-if="item.zan=='0'" @click="GetAddZan(item.id,item.id,index,1)" class="img14"
								src="../../static/syqt/z.png" mode="">
								<!-- 已点赞 -->
								<image v-if="item.zan=='1'" @click="GetAddZan(item.id,item.id,index,1)" class="img18"
									src="../../static/good.png" mode="">
									<view class="text" style="font-size: 22	rpx; color: #929090;">
										{{item.zan_num}}
									</view>
						</view>
					</view>
				</view>
				<view v-if="item.comment_list!=''" v-for="(items,index2) in item.comment_list" :key="index2"
					class="comment ">
					<view class="box5">
						<text style="color: #26B8A5;">{{items.nickname}}: </text>
						<view style="margin-left: 10rpx;"> {{items.content}}</view>
						<image v-if="items.zan=='0'" @click="GetAddZan(index2,items.id,index,2)" class="img14"
							src="../../static/syqt/z.png" mode=""></image>
						<image v-if="items.zan=='1'" @click="GetAddZan(index2,items.id,index,2)" class="img18"
							src="../../static/good.png" mode="">
					</view>
					<image v-if="items.image!='undefined'&&items.image!=''" class="img5" :src="items.image" mode="">
					</image>
				</view>
			</view>
		</template>
		<view class="box-fb" @click="tzRelease">
			发布
		</view>
		<view class="nomore">没有了</view>
		<view class="" style="height:200rpx ;">

		</view>
		<Tabbar cureentPage='index'></Tabbar>
	</view>
</template>

<script>
	import $api from '../../common/request3.js'
	import Tabbar from '../../components/tabber.vue'
	// import $api from '../../common/request.js'
	export default {
		data() {
			return {
				"navIndex": 0,
				schoolName: '',
				school_id: '',
				TzList: [],
				TabCur: 0,
				scrollLeft: 0,
				"navList2": [],
				noticeList: [],
				openid: '123456',
				code: '',
				key: '123456',
				zan: '',
				page: '1',
				"isHas": true,
				search: ''
			}
		},

		onLoad(op) {
			if (op.code != "undefined" && op.code != undefined && op.code != "") {
				this.code = op.code
				console.log(op.code)
			}
			if (op.key != "undefined" && op.key != undefined && op.key != "") {
				this.key = op.key
				uni.setStorageSync('key', op.key)
				this.GetSchoolList()
			}
			this.openid = uni.getStorageSync('openid');
     
			
			this.school_id = uni.getStorageSync('school_id');
			if (this.school_id) {
				this.getIsWxClient()
			}
			if (this.school_id && this.openid) {
				this.GetHotTzList()
				this.GetNavList()
				this.GetTzList()
			}
		},
		components: {
			Tabbar
		},
		computed: {
			// 计算属性，用于动态显示用户的赞数
			userLikeCount() {
				return this.TzList[index]
				// this.TzList[index].comment_list
			}
		},
		onReachBottom() {
			this.page++;
			this.GetTzList('add')
		},
		filters: {
			timeAgo(createtime) {
				const now = Date.now();
				const seconds = Math.floor((now - createtime * 1000) / 1000);

				let interval = seconds / 31536000;

				if (interval > 1) {
					return parseInt(interval) + "年前";
				}
				interval = seconds / 2592000;
				if (interval > 1) {
					return parseInt(interval) + "月前";
				}
				interval = seconds / 86400;
				if (interval > 1) {
					return parseInt(interval) + "天前";
				}
				interval = seconds / 3600;
				if (interval > 1) {
					return parseInt(interval) + "小时前";
				}
				interval = seconds / 60;
				if (interval > 1) {
					return parseInt(interval) + "分钟前";
				}
				return "刚刚";
			}
		},
		methods: {
			getIsWxClient() {
				var openid = uni.getStorageSync('openid');
				const data = {
					openid: openid
				};
				this.$globalData.openid = data.openid;
				var code = this.code
				// 跳转
				if (openid == '' && code == '') {
					var url = encodeURIComponent(window.location.href);
					var appid = 'wxf2b42844fb75da4c'
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_base&component_appid=wxd0fe3025534f7479&state=STATE`
					// `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
					// window.location.href =
					// 	`https://open.weixin.gg.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
				} else if (openid == '' && code !== '') {
					$api.request({
						url: "lt/wxLogin",
						method: 'POST',
						data: {
							code: code,
							key: this.key,
							school_id: this.school_id
						}
					}).then((res) => {
						this.openid = res.data.openid
						uni.setStorageSync('openid', res.data.openid)
						const data = {
							openid: res.data.openid
						};
						this.$globalData.openid = data.openid;
						this.GetHotTzList()
						this.GetNavList()
						this.GetTzList()


					}).catch((res) => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					})
				} else {
					//this.loginpay()
				}
				return true;
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log(this.TabCur)
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			tzDetails(id) {
				uni.navigateTo({
					url: `/pages/index/details?tz_id=${id}`
				})
			},
			tzRelease() {
				uni.navigateTo({
					url: `/pages/release/release?school_id=${this.school_id}&key=${this.key}`
				})
			},
			GetSchoolList() {
				var school_id = uni.getStorageSync('school_id');
				$api.request({
					url: "lt/getSchoolList",
					method: 'POST',
					data: {
						key: this.key,
					}
				}).then((res) => {
					console.log(res, '55555')
					if (res.data.length == 1) {
						this.schoolName = res.data[0].name
						this.school_id = res.data[0].id
						uni.setStorageSync('school_id', res.data[0].id)

					} else if (res.data.length > 1) {
						if (school_id == '') {
							uni.navigateTo({
								url: '/pages/index/select'
							})
						}
						//  else {
						// 	this.GetHotTzList()
						// 	this.GetNavList()
						// 	this.GetTzList()
						// }
					}

				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			GetHotTzList() {
				var openid = uni.getStorageSync('openid')
				$api.request({
					url: "lt/getHotTzList",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						school_id: this.school_id
					}
				}).then((res) => {
					this.noticeList = res.data.map(item => `#${item.content}`);
					console.log(this.noticeList, '899999')
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			GetTzList(type) {
				var openid = uni.getStorageSync('openid');
				if (type == "reset") {
					this.TzList = [];
					this.page = 1;
				}
				$api.request({
					url: "lt/getTzList",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						school_id: this.school_id,
						page: this.page,
						search: this.search
					}
				}).then((res) => {
					let arr = res.data || [];
					this.isHas = arr.length > 10;
					arr.map(item => {
						this.TzList.push(item)
					})
					console.log(this.TzList, '77777')
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
				
			},
			GetNavList() {
				var openid = uni.getStorageSync('openid');
				$api.request({
					url: "lt/getNavList",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						school_id: this.school_id
					}
				}).then((res) => {
					this.navList2 = res.data
					console.log(res.data, '8888')
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
				
				
			},
			// 判断是否点赞,等以后换图标
			GetAddZan(id2, id, index, panduan) {
				if (panduan == 1) {
					var tz_id = id
					var cm_id = ''
				} else if (panduan == 2) {
					var tz_id = ''
					var cm_id = id
				}
				var openid = uni.getStorageSync('openid');
				$api.request({
					url: "lt/addZan",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						tz_id: tz_id,
						cm_id: cm_id
					}
				}).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					//1是点赞，0是未点赞
					this.zan = res.data.zan
					console.log(index, '杨亚娟')
					if (panduan == 2) {
						if (res.data.zan == '0') {
							this.TzList[index].comment_list[id2].zan = 0
							console.log('yangyajuan1', this.TzList[index].comment_list[id2].zan)
						} else if (res.data.zan == '1') {
							this.TzList[index].comment_list[id2].zan = 1
						}
						return
					} else {
						if (res.data.zan == '0') {
							this.TzList[index].zan_num -= 1;
							this.TzList[index].zan = 0
						} else {
							this.TzList[index].zan_num += 1;
							this.TzList[index].zan = 1
						}
						return
					}
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			// 这部分备用，不要误删
			aaaa() {
				function timeAgo(dateString) {
					if (dateString) {
						const date = new Date(dateString);
						const difference = Date.now() - date.getTime();

						const seconds = Math.abs(difference / 1000);
						const minutes = Math.abs(difference / 1000 / 60);
						const hours = Math.abs(difference / 1000 / 60 / 60);
						const days = Math.abs(difference / 1000 / 60 / 60 / 24);
						const months = Math.abs(difference / 1000 / 60 / 60 / 24 / 30);
						const years = Math.abs(difference / 1000 / 60 / 60 / 24 / 365);

						if (years > 1) {
							return `${Math.floor(years)}年前`;
						} else if (months > 1) {
							return `${Math.floor(months)}个月前`;
						} else if (days > 1) {
							return `${Math.floor(days)}天前`;
						} else if (hours > 1) {
							return `${Math.floor(hours)}小时前`;
						} else if (minutes > 1) {
							return `${Math.floor(minutes)}分钟前`;
						} else if (seconds >= 10) {
							return `${Math.floor(seconds)}秒前`;
						} else {
							return '刚刚';
						}
					}
					return '日期无效';
				}

				// 使用示例
				// // $setTime(item.pay_time)
				const timeString = '2024-01-01T00:00:00Z'; // ISO格式日期字符串
				// const timeString = $setTime('1715604218');
				console.log(timeAgo(timeString), '5555'); // 输出时间差字符串
			},
			tzHome(user_id) {
				uni.navigateTo({
					url: `/pages/index/home?school_id=${this.school_id}&user_id=${user_id}&key=${this.key}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.onebox {
		min-height: 100vh;
		background-color: #F6F7F8;
		width: 750rpx;
		overflow-x: hidden; //防止页面左右滑动
	}

	.headBg {
		width: 750rpx;
		overflow-x: hidden;
		height: 80rpx;
		background-color: #63d6ba;
	}

	.head-content {
		display: flex;
		align-items: center;
		padding-top: 24rpx;
		color: #fefefe;
	}

	.head-content-center {
		flex: 1;
		display: flex;
		justify-content: center;
		margin-right: 50rpx;
	}

	.cu-item2 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0 20rpx;
	}

	.nav .cu-item.cur {
		border: 0rpx;
	}

	.nav .cu-item {
		line-height: 50rpx;
		height: 75rpx;
	}

	.title1 {
		color: rgb(180, 180, 180);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.title2 {
			height: 10rpx;
			width: 24rpx
		}

		&.active {
			color: #262626;
		}

		&.active2 {
			height: 10rpx;
			width: 24rpx;
		}
	}

	.broadcast {
		;
		padding-top: 20rpx;
		height: 150rpx;
		margin: 0 20rpx;
		// background: #FFFFFF;
		background: linear-gradient(180deg, #e3fbfa 0%, #fff 100%);
		border-radius: 20rpx;

		.img7 {
			height: 30rpx;
			width: 170rpx;
			margin-left: 20rpx;
			margin-bottom: 10rpx;
		}

		.swiperBox {
			// width: 750rpx;
			// background: red;
			height: 80rpx;
			// margin-top: 50rpx;


			.swiperItem {
				.txt1 {
					color: #333333;
					margin-left: 20rpx;
					font-size: 24rpx;
					font-weight: 600;
				}

				.txt2 {
					color: #F29A38;
				}
			}

		}
	}

	.box25 {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 30rpx;
		padding: 30rpx 20rpx;
	}

	.box3 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.box5 {
		display: flex;
		align-items: center;
	}

	.box24 {
		flex: 1;
	}

	.box7 {
		margin-left: 141rpx;
		display: flex;
		justify-content: right;
		align-items: center;
		flex-direction: column;
	}

	.btn1 {
		width: 139rpx;
		height: 55rpx;
		background: #FFFFFF;
		border-radius: 27rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 21rpx;
	}

	.img3 {
		width: 36rpx;
		height: 32rpx;
	}

	.img13 {
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
	}

	.box8 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.img14 {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0rpx;
	}

	.img18 {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}

	.img15 {
		width: 30rpx;
		height: 30rpx;
		margin: 0 5rpx 0 20rpx;
	}


	.comment {
		background-color: #F6F7F8;
		padding: 20rpx 10rpx;
		border-radius: 5rpx;
		font-size: 26rpx;
	}

	.box-fb {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #63d6ba;
		color: #fff;
		font-size: 24rpx;
		position: fixed; //定位;
		left: 550rpx;
		bottom: 400rpx;
		z-index: 9999;
	}

	.img5 {
		width: 80rpx;
		height: 80rpx;
		margin-left: 120rpx;
		border-radius: 10rpx;
	}

	.box88888 {
		display: flex;
		flex-wrap: wrap;
	}

	.btn3 {
		padding: 5rpx 10rpx;
		border-radius: 30rpx;
		color: #63d6ba;
		font-size: 22rpx;
		background-color: #e3fbfa;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>